<template>
<div class="col-md-12" style="padding-right:0px;padding-left:0px;">
    <br/>
<form class="form-inline" style="text-align:left;">
  <label for="name">&nbsp;设备名称:</label>
  <input type="text" class="form-control" id="usnameval" placeholder="请输入设备名称" >
  <label for="name">&nbsp;类型:</label>
     <select  id="typecx" class="form-control">	<option value="">--全部-</option> 
	<option value="0">单色</option> 
  <option value="1">双色</option>
  <option value="2">全彩</option> 
  <option value="3">安卓</option>
		</select>
   <button type="button" class="btn btn-primary">查询</button>
   <button type="button" style="display:" class="btn btn-success" id="addt"  data-toggle="modal" data-target="#myModal">新增</button>
   <!--<button type="button" class="btn btn-primary"  >开启</button>
 <button type="button" class="btn btn-primary" id="add"  data-toggle="modal" data-target="#myModal">关闭</button>!-->
  <button type="button" class="btn btn-success" id="update" style="display:none"  data-toggle="modal" data-target="#myModal">新增</button>
  </form>
  <br/>
<div class="col-md-6 allmap"   id="map_canvas" style="display:none">  </div>
<div class="jqGrid_wrapper"> 
                        <table id="table_list_1"></table>
                        <div id="pager_list_1"></div>
                    </div>
  </div>
</template>
<script>
import '../../../../static/js/jqgrid/jquery.jqGrid.min.js';
import '../../../../static/js/jqgrid/grid.locale-cn.js';
import '../../../../static/js/jqgrid/jquery.jqGrid.min.js';
import '../../../../static/js/jqgrid/grid.locale-cn.js';

import  '../../../../static/js/page/Monitoring/list.js';


export default {
 data() {
  return {
   address_detail: "", //详细地址
   userlocation: { lng: "", lat: "" },
   clearable: true,
   suggestId: "suggestId",
   map : {},
   mk: {}
  };
 },
 created () {
    
 },
 methods: {
   drawMap() {
    this.map = new BMap.Map("map_canvas");        // 创建地图实例
    this.map.addControl(new BMap.NavigationControl());      // 启用放大缩小 尺
    this.map.enableScrollWheelZoom();
    this.getlocation();//获取当前坐标, 测试时获取定位不准。
   
    var point = new BMap.Point(this.userlocation.lng, this.userlocation.lat); // 创建点坐标 
    this.map.centerAndZoom(point, 13);         // 初始化地图，设置中心点坐标和地图级别 
    var marker = new BMap.Marker(point);    // 创建标注  
    this.map.addOverlay(marker);           // 将标注添加到地图中
      
    var ac = new BMap.Autocomplete({
    //建立一个自动完成的对象
    input: "suggestId",
    location: this.map
    });
    var myValue;
   ac.addEventListener("onconfirm", (e)=> {
    //鼠标点击下拉列表后的事件
    var _value = e.item.value;
    myValue =_value.province +_value.city +_value.district +_value.street +_value.business;
    this.address_detail = myValue;
    this.setPlace();
   });
   },
   getMarker (point) {
        this.mk = new BMap.Marker(point); 
        this.mk.addEventListener("dragend", this.showInfo);
        this.mk.enableDragging();  //可拖拽
        this.getAddress(point);
        this.map.addOverlay(this.mk);//把点添加到地图上 
        this.map.panTo(point);
   },
   getlocation () {
    //获取当前位置
    var geolocation = new BMap.Geolocation(); 
    geolocation.getCurrentPosition((r) =>{ 
      if(geolocation.getStatus() == BMAP_STATUS_SUCCESS){ 
        this.getMarker(r.point);
        this.userlocation = r.point;
      }else { 
        alert('failed'+this.getStatus()); 
      } 
    });
   },
   //绑定Marker的拖拽事件
     showInfo(e){
      var gc = new BMap.Geocoder();
      gc.getLocation(e.point, (rs)=>{
        var addComp = rs.addressComponents;
        var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;//获取地址
          
        //画图 ---》显示地址信息
        var label = new BMap.Label(address,{offset:new BMap.Size(20,-10)});
        this.map.removeOverlay(this.mk.getLabel());//删除之前的label
  
        this.mk.setLabel(label);
        this.address_detail = address;
        this.userlocation = e.point;
          
       });
    },
     //获取地址信息，设置地址label
     getAddress(point){
      var gc = new BMap.Geocoder();
      gc.getLocation(point, (rs)=>{
        var addComp = rs.addressComponents;
        var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;//获取地址
        //画图 ---》显示地址信息
        var label = new BMap.Label(address,{offset:new BMap.Size(20,-10)});
        this.map.removeOverlay(this.mk.getLabel());//删除之前的label
        this.address_detail = address;
        this.mk.setLabel(label);
       });
    },
    setPlace() {
    this.map.clearOverlays(); //清除地图上所有覆盖物
    var th = this
    function myFun() {
     th.userlocation = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
     th.map.centerAndZoom(th.userlocation, 18);
     th.getMarker(th.userlocation);
    }
    var local = new BMap.LocalSearch(this.map, {
     onSearchComplete: myFun //智能搜索
    });
    local.search(this.address_detail);
   },
   search () {
       var localSearch = new BMap.LocalSearch(this.map);
       localSearch.enableAutoViewport(); //允许自动调节窗体大小
       this.searchByInputName(localSearch);
 },
   searchByInputName(localSearch) {
     this.map.clearOverlays(); //清空原来的标注
     var th = this;
     var keyword = this.address_detail;
     localSearch.setSearchCompleteCallback(function(searchResult) {
       var poi = searchResult.getPoi(0);
       th.userlocation = poi.point;
       th.map.centerAndZoom(poi.point, 13);
       th.getMarker(th.userlocation);
    });
     localSearch.search(keyword);
   },
   onCopy () {
     this.$message('内容已复制到剪贴板!');
   },
   onError () {
     this.$message('内容复制失败,请重试!');
   }
 },
 mounted() {
  this.$nextTick(function() {
   this.drawMap();
  });
 }
};
 $(document).ready(function () {
      $(".btn-info").eq(0).click(function(){
            console.log(123);
      });
        $(".btn-info").eq(1).click(function(){
         
            console.log(123);

      });
    
        $.jgrid.defaults.styleUI = "Bootstrap";
        var mydata = [{
            id: "1",
            invdate: "2010-05-24",
            name: "test",
            note: "note",
            tax: "10.00",
            total: "2111.00"
        }, {id: "2", invdate: "2010-05-25", name: "test2", note: "note2", tax: "20.00", total: "320.00"}, {
            id: "3",
            invdate: "2007-09-01",
            name: "test3",
            note: "note3",
            tax: "30.00",
            total: "430.00"
        }, {id: "4", invdate: "2007-10-04", name: "test", note: "note", tax: "10.00", total: "210.00"}, {
            id: "5",
            invdate: "2007-10-05",
            name: "test2",
            note: "note2",
            tax: "20.00",
            total: "320.00"
        }, {id: "6", invdate: "2007-09-06", name: "test3", note: "note3", tax: "30.00", total: "430.00"}, {
            id: "7",
            invdate: "2007-10-04",
            name: "test",
            note: "note",
            tax: "10.00",
            total: "210.00"
        }, {
            id: "8",
            invdate: "2007-10-03",
            name: "test2",
            note: "note2",
            amount: "300.00",
            tax: "21.00",
            total: "320.00"
        }, {
            id: "9",
            invdate: "2007-09-01",
            name: "test3",
            note: "note3",
            amount: "400.00",
            tax: "30.00",
            total: "430.00"
        }, {
            id: "11",
            invdate: "2007-10-01",
            name: "test",
            note: "note",
            amount: "200.00",
            tax: "10.00",
            total: "210.00"
        }, {
            id: "12",
            invdate: "2007-10-02",
            name: "test2",
            note: "note2",
            amount: "300.00",
            tax: "20.00",
            total: "320.00"
        }, {
            id: "13",
            invdate: "2007-09-01",
            name: "test3",
            note: "note3",
            amount: "400.00",
            tax: "30.00",
            total: "430.00"
        }, {
            id: "14",
            invdate: "2007-10-04",
            name: "test",
            note: "note",
            amount: "200.00",
            tax: "10.00",
            total: "210.00"
        }, {
            id: "15",
            invdate: "2007-10-05",
            name: "test2",
            note: "note2",
            amount: "300.00",
            tax: "20.00",
            total: "320.00"
        }, {
            id: "16",
            invdate: "2007-09-06",
            name: "test3",
            note: "note3",
            amount: "400.00",
            tax: "30.00",
            total: "430.00"
        }, {
            id: "17",
            invdate: "2007-10-04",
            name: "test",
            note: "note",
            amount: "200.00",
            tax: "10.00",
            total: "210.00"
        }, {
            id: "18",
            invdate: "2007-10-03",
            name: "test2",
            note: "note2",
            amount: "300.00",
            tax: "20.00",
            total: "320.00"
        }, {
            id: "19",
            invdate: "2007-09-01",
            name: "test3",
            note: "note3",
            amount: "400.00",
            tax: "30.00",
            total: "430.00"
        }, {
            id: "21",
            invdate: "2007-10-01",
            name: "test",
            note: "note",
            amount: "200.00",
            tax: "10.00",
            total: "210.00"
        }, {
            id: "22",
            invdate: "2007-10-02",
            name: "test2",
            note: "note2",
            amount: "300.00",
            tax: "20.00",
            total: "320.00"
        }, {
            id: "23",
            invdate: "2007-09-01",
            name: "test3",
            note: "note3",
            amount: "400.00",
            tax: "30.00",
            total: "430.00"
        }, {
            id: "24",
            invdate: "2007-10-04",
            name: "test",
            note: "note",
            amount: "200.00",
            tax: "10.00",
            total: "210.00"
        }, {
            id: "25",
            invdate: "2007-10-05",
            name: "test2",
            note: "note2",
            amount: "300.00",
            tax: "20.00",
            total: "320.00"
        }, {
            id: "26",
            invdate: "2007-09-06",
            name: "test3",
            note: "note3",
            amount: "400.00",
            tax: "30.00",
            total: "430.00"
        }, {
            id: "27",
            invdate: "2007-10-04",
            name: "test",
            note: "note",
            amount: "200.00",
            tax: "10.00",
            total: "210.00"
        }, {
            id: "28",
            invdate: "2007-10-03",
            name: "test2",
            note: "note2",
            amount: "300.00",
            tax: "20.00",
            total: "320.00"
        }, {
            id: "29",
            invdate: "2007-09-01",
            name: "test3",
            note: "note3",
            amount: "400.00",
            tax: "30.00",
            total: "430.00"
        },
        {
            id: "29",
            invdate: "2007-09-01",
            name: "test3",
            note: "note3",
            amount: "400.00",
            tax: "30.00",
            total: "430.00"
        },
        {
            id: "29",
            invdate: "2007-09-01",
            name: "test3",
            note: "note3",
            amount: "400.00",
            tax: "30.00",
            total: "430.00"
        },
        {
            id: "29",
            invdate: "2007-09-01",
            name: "test3",
            note: "note3",
            amount: "400.00",
            tax: "30.00",
            total: "430.00"
        },
          {
            id: "29",
            invdate: "2007-09-01",
            name: "test3",
            note: "note3",
            amount: "400.00",
            tax: "30.00",
            total: "430.00"
        }
        
        ];
        $("#table_list_1").jqGrid({
            data: mydata,
            datatype: "local",
            height: "100%",
            autowidth: true,
            shrinkToFit: true,
            rowNum: 20,
            rowList: [10, 20, 30],
            colNames: ["序号", "日期", "客户", "金额", "运费", "总额", "备注"],
            colModel: [{name: "id", index: "id", width: 60, sorttype: "int"}, {
                name: "invdate",
                index: "invdate",
                width: 90,
                sorttype: "date",
                formatter: "date"
            }, {name: "name", index: "name", width: 100}, {
                name: "amount",
                index: "amount",
                width: 80,
                align: "right",
                sorttype: "float",
                formatter: "number"
            }, {name: "tax", index: "tax", width: 80, align: "right", sorttype: "float"}, {
                name: "total",
                index: "total",
                width: 80,
                align: "right",
                sorttype: "float"
            }, {name: "note", index: "note", width: 150, sortable: false}],
            pager: "#pager_list_1",
            viewrecords: true,
            caption: "设备列表",
            hidegrid: false
        });

           $("#table_list_1").setGridHeight($(window).height() * 0.66);
    });
</script>
<style scoped>
.allmap {
 width: 100%;

height: 690px;
 font-family: "微软雅黑";
 border: 1px solid green;
}
.el-tag {
 cursor: pointer;
}
 @import '../../../../static/css/jqgrid/ui.jqgrid.css';
</style>


